<template>
    <div id="goods">
        <div class="menu-wrapper" ref="menuScroll">
            <ul>
                <li class="menu-item" :class="{'current': currentIndex === 0}" @click="selectMenu(0)">
                    <p class="text">
                        <img v-if="container.tag_icon" class="icon" :src="container.tag_icon" />
                        {{container.tag_name}}
                    </p>
                </li>
                <li v-for="(item, key) in goods" class="menu-item" :class="{'current': currentIndex === key + 1}" @click="selectMenu(key + 1)">
                    <p class="text">
                        <img v-if="item.icon" class="icon" :src="item.icon" />
                        {{item.name}}
                    </p>
                    <i class="num" v-show="calculateCount(item.spus)">{{calculateCount(item.spus)}}</i>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodScroll">
            <ul>
                <li class="container-list food-list-hook">
                   <div v-for="item in container.operation_source_list">
                       <img :src="item.pic_url" />
                   </div> 
                </li>
                <li v-for="item in goods" class="food-list food-list-hook">
                    <h3 class="title">{{item.name}}</h3>
                    <ul>
                        <li v-for="food in item.spus" class="food-item" @click="showDetail(food)">
                            <div class="icon" :style="head_bg(food.picture)"></div>
                            <div class="content">
                                <h3 class="name">{{food.name}}</h3>
                                <p v-if="food.description" class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="saled">{{food.month_saled_content}}</span>
                                    <span class="saled">{{food.praise_content}}</span>
                                </div>
                                <img v-if="food.product_label_picture" class="product" :src="food.product_label_picture" />
                                <p class="price">
                                    <span class="text">￥{{food.min_price}}</span>
                                    <span class="unit">/{{food.unit}}</span>
                                </p>
                            </div>
                            <div class="cartcontrol-wrapper">
                                <AppCartControl :food="food"/>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <AppCart :poiInfo="poiInfo" :selectFoods="selectFoods"/>
        <AppDetails :food="selectFood" ref="foodView"/>
    </div>
</template>

<script>
    import BSscoll from 'better-scroll'
    import AppCart from './../cart/Cart'
    import AppCartControl from './../cartcontrol/CartControl'
    import AppDetails from './../details/Details'

    export default {
        name: 'Goods',
        components: {
            AppCart,
            AppCartControl,
            AppDetails
        },
        data() {
            return {
                goods: [],
                container: {},
                poiInfo: {},
                listHeight: [],
                menuScroll: {},
                foodScroll: {},
                scrollY: 0,
                selectFood: {}
            }
        },
        methods: {
            head_bg(imgName) {
                return "background-image: url(" + imgName + ")";
            },
            initScroll() {
                this.menuScroll = new BSscoll(this.$refs.menuScroll, {
                    click: true
                });
                this.foodScroll = new BSscoll(this.$refs.foodScroll, {
                    probeType: 3,
                    click: true
                });
                this.foodScroll.on('scroll', (pos) => {
                    this.scrollY = Math.abs(Math.round(pos.y));
                })
            },
            calculateHeight() {
                const aFoodList = this.$refs.foodScroll.getElementsByClassName('food-list-hook');
                let height = 0;
                this.listHeight.push(height);
                for (let i = 0; i < aFoodList.length; i++) {
                    height += aFoodList[i].clientHeight;
                    this.listHeight.push(height);
                }
            },
            selectMenu(key) {
                const aFoodList = this.$refs.foodScroll.getElementsByClassName('food-list-hook');
                const element = aFoodList[key];
                this.foodScroll.scrollToElement(element, 500)
            },
            calculateCount(spus) {
                let count = 0;
                spus.forEach(item => {
                    if (item.count > 0) count += item.count;
                })
                return count;
            },
            showDetail(food) {
                this.selectFood = food;
                console.log(this.selectFood)
                this.$refs.foodView.showView();
            }
        },
        computed: {
            currentIndex() {
                for (let i = 0; i < this.listHeight.length; i++) {
                    let height1 = this.listHeight[i];
                    let height2 = this.listHeight[i + 1];

                    if ((this.scrollY >= height1 && this.scrollY < height2) || !height2) {
                        return i;
                    }
                }
                return 0
            },
            selectFoods() {
                let foods = [];
                this.goods.forEach(item => {
                    item.spus.forEach(food => {
                        if (food.count > 0) {
                            foods.push(food);
                        }
                    })
                })

                return foods;
            }
        },
        created() {
            fetch('/api/goods').then(response => response.json()).then(response => {
                this.goods = response.data.food_spu_tags;
                this.container = response.data.container_operation_source;
                this.poiInfo = response.data.poi_info;

                //  DOM已经更新才会执行
                this.$nextTick(() => {
                    this.initScroll();
                    this.calculateHeight();
                })
            })
        }
    }
</script>

<style scoped>
    #goods {
        display: flex;
        position: absolute;
        top: 190px;
        bottom: 51px;
        overflow: hidden;
        width: 100%;
    }
    
    #goods .menu-wrapper {
        flex: 0 0 85px;
        background: #f4f4f4;
    }
    
    #goods .foods-wrapper {
        flex: 1;
    }
    
    #goods .menu-wrapper .menu-item {
        padding: 16px 23px 15px 10px;
        border-bottom: 1px solid #E4E4E4;
        position: relative;
    }
    
    #goods .menu-wrapper .menu-item .text {
        font-size: 13px;
        color: #333333;
        line-height: 17px;
        vertical-align: middle;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    #goods .menu-wrapper .menu-item .text .icon {
        width: 15px;
        height: 15px;
        vertical-align: middle;
    }
    
    #goods .foods-wrapper .container-list {
        padding: 11px 11px 0 11px;
        border-bottom: 1px solid #E4E4E4;
    }
    
    #goods .foods-wrapper .container-list img {
        width: 100%;
        margin-bottom: 11px;
        border-radius: 5px;
    }
    
    #goods .foods-wrapper .food-list {
        padding: 11px;
    }
    
    #goods .foods-wrapper .food-list .title {
        height: 13px;
        font-size: 13px;
        background: url(./img/btn_yellow_highlighted@2x.png) no-repeat left center;
        background-size: 2px 10px;
        padding-left: 7px;
        margin-bottom: 12px;
    }
    
    #goods .foods-wrapper .food-list .food-item {
        display: flex;
        margin-bottom: 25px;
        position: relative;
    }
    
    #goods .foods-wrapper .food-list .food-item .icon {
        flex: 0 0 63px;
        background-position: center;
        background-size: 120% 100%;
        background-repeat: no-repeat;
        margin-right: 11px;
        height: 75px;
    }
    
    #goods .foods-wrapper .food-list .food-item .content {
        flex: 1;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .name {
        font-size: 16px;
        line-height: 21px;
        color: #333333;
        margin-bottom: 10px;
        padding-right: 27px;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .desc {
        font-size: 10px;
        line-height: 19px;
        color: #bfbfbf;
        margin-bottom: 8px;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .extra {
        font-size: 10px;
        color: #BFBFBF;
        margin-bottom: 7px;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .extra .saled {
        margin-right: 14px;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .product {
        height: 15px;
        margin-bottom: 6px;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .price {
        font-size: 0;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .price .text {
        font-size: 14px;
        color: #fb4e44;
    }
    
    #goods .foods-wrapper .food-list .food-item .content .price .unit {
        font-size: 12px;
        color: #BFBFBF;
    }
    
    #goods .menu-wrapper .menu-item.current {
        background: white;
        font-weight: bold;
        margin-top: -1px;
        position: relative;
    }
    
    #goods .menu-wrapper .menu-item:first-child.current {
        margin-top: 1px;
    }
    
    #goods .foods-wrapper .food-list .food-item .cartcontrol-wrapper {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    #goods .menu-wrapper .menu-item .num {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        color: white;
        background: red;
        text-align: center;
        font-size: 7px;
        line-height: 16px;
    }
</style>